<template>
  <div style="width:100%;height: 100%;">
    <div class="big_div">
      <x-header header-background-color="#fff" :left-options="{showBack: true,preventGoBack:true}"  @on-click-back="GoBack">事件详情
        <!-- <a slot="right">Feedback</a> -->
      </x-header>
      <div class="big_content">
        <div class="list_content">
             <div class="content_header">
                <span class="header_title">{{itemObj.eventtitle}}</span>
                <span class="header_time">
                  <span>{{itemObj.occurtimeStr}}  {{beforeTimeStr}}</span>
                </span>
                <span class="header_handle">
                  <span class="handle_left">
                    <span v-if="itemObj.eventtypeStr" class="tab_gray">&nbsp;&nbsp;{{itemObj.eventtypeStr}}&nbsp;&nbsp;</span>
                    <span class="tab_red">&nbsp;&nbsp;{{itemObj.eventlevelStr}}&nbsp;&nbsp;</span>
                  </span>
                  <span class="handle_right">
                    <span class="btn_feedback" @click="openRouter('the_feedback')">
                      
                      <img src="../../assets/images/icon/btn_feedback.png" alt="" srcset="">现场反馈
                    </span>
                  </span>
                </span>
            </div>
            <div class="content_map">
              <div class="map_title">
                <span @click="relocation"><img src="../../assets/images/icon/locationGray.png" alt="" srcset=""></span>
                <span @click="relocation" class="location_content">{{address}}</span>
                <span  class="location_after" @click="mapHandle('find_rim')">
                  <img src="../../assets/images/icon/rim.png" alt="" srcset="">
                  发现周边
                </span>
              </div>
              <!-- <commonMap ref="CMap" bigHeight="35vh" @handle="mapHandle" /> -->
              <div class="containerinfo" id="containerinfo"></div> 
            </div>
            <div class="content_foot">
              <div class="info_item" style="height: auto;">
                <div class="item_title">
                  <img src="../../assets/images/icon/header_flag.png" alt="" srcset="">
                  <span>伤亡情况</span>
                </div>
                <div class="item_content" >
                  <span>死亡</span><span class="people_die">&nbsp;&nbsp;{{itemObj.deathnum}}&nbsp;&nbsp;</span><span>人，</span>
                  <span>受伤</span><span class="people_bruise">&nbsp;&nbsp;{{itemObj.gbhnum}}&nbsp;&nbsp;</span><span>人，</span>
                  <span>失踪</span><span class="people_missing">&nbsp;&nbsp;{{itemObj.missingnum}}&nbsp;&nbsp;</span><span>人</span>
                  <!-- <span>{{itemObj.casualties}}</span> -->
                </div>
              </div>
              <div class="info_item" style="height: auto;">
                <div class="item_title">
                  <img src="../../assets/images/icon/header_flag.png" alt="" srcset="">
                  <span>事件描述</span>
                </div>
                <div class="item_content">
                  <span>{{itemObj.evnreason}}</span>
                </div>
              </div>
              <div class="foot_btn">
                <span @click="openRouter('task_list')">任务清单</span>
                <span @click="openRouter('replenish')">补充出动情况</span>
              </div>
            </div>
        </div>
       
      </div>
    </div>
    <popup v-if="replenishModel" v-model="replenishModel" height="100%" width="100%" position="right" style="    overflow-x: hidden;">
        <formElement :flagTrue="false" :refid="itemObj.eventid"  @close="closeReplenish"/>
    </popup>
    <popup v-if="feedbackModel" v-model="feedbackModel" height="100%" width="100%" position="right">
        <feedback :refid="itemObj.eventid" headerTitle="现场反馈"  @close="closeFeedback"/>
    </popup>
    <popup v-if="taskModel" v-model="taskModel" height="100%" width="100%" position="right">
        <taskList :refid="itemObj.eventid"  @close="closeAllinfo"/>
    </popup>
    
  </div>
</template>



<script>
import { Datetime, PopupPicker, Group, Cell, Picker, XButton, Divider, XSwitch,XHeader,Popup  } from 'vux'
import formElement from "../registration/formElement";
import feedback from "./feedback";
import taskList from "../taskList/taskList";
import commonMap from "../commons/commonMap";
export default {
  components: {
    PopupPicker,
    Group,
    Picker,
    XButton,
    Divider,
    Cell,
    XSwitch,
    Datetime,
    XHeader,
    Popup,
    formElement,
    feedback,
    taskList,
    commonMap
  },
  props:['queryMap','itemObj'],
  data () {
    return {
      date: '',
      marker:"",
      mapsinfo:"",
      address:"",
      replenishModel:false,
      feedbackModel:false,
      taskModel:false,
      beforeTimeStr:"",
      isRouter:false,
      currlonlat:{},
    }
  },
  created(){
    let _this=this;
    if(this.itemObj){
      console.log(this.itemObj)
    }else{
      _this.isRouter=true;
      let eventInfoStr= sessionStorage.getItem("eventInfo")
      let eventInfo=JSON.parse(eventInfoStr);
      this.itemObj=eventInfo;
    }
    let differenceStr= _this.$GetDateDifference(this.itemObj.occurtimeStr);
      if(differenceStr){
        let fristDiff=differenceStr.split(" ");
        _this.beforeTimeStr=fristDiff[0]+"前";
      }
      console.log(differenceStr);
    this.$enJsBack()//调用安卓方法（手机back键返回问题）
  },
  methods: {
    GoBack(){
      this.$closeStates();
      if(this.isRouter){
        this.$router.go(-1);
      }else{
         this.$emit("close")
      }
     
    },
    relocation(){
      this.mapsinfo.setCenter(this.currlonlat);
      this.mapsinfo.setZoom(15);
    },
    mapHandle(_type){
      console.log("点击处理")
      console.log(_type);
    },
    closeAllinfo(){
      this.taskModel=false;
      this.feedbackModel=false;
      this.replenishModel=false;
      window.GoBack=this.GoBack;//安卓调用GoBack（手机back键返回问题）
    },
    closeFeedback(){
      this.feedbackModel=false;
      window.GoBack=this.GoBack;//安卓调用GoBack（手机back键返回问题）
    },
    closeReplenish(){
      this.replenishModel=false;
      window.GoBack=this.GoBack;//安卓调用GoBack（手机back键返回问题）
    },
    locationSet(lontatStr){
      let _this=this;
      let lon=lontatStr.split("_")[0];
      let lat=lontatStr.split("_")[1];
      _this.address=lontatStr.split("_")[2];
      
      let lonlat=new AMap.LngLat(parseFloat(lon), parseFloat(lat))
      _this.currlonlat=lonlat;
      if(_this.marker){
        // 移除已创建的 marker
        _this.mapsinfo.remove(_this.marker);
      }
        // 创建一个 Marker 实例：
      _this.marker = new AMap.Marker({
          position:lonlat ,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title:_this.address,
          size: new AMap.Size(20, 30),
      });
      _this.mapsinfo.add(_this.marker);
      _this.mapsinfo.setCenter(lonlat);
      _this.mapsinfo.setZoom(15);
      
     

    },
    openRouter(_type){
      let _this=this;
      console.log(_type)
      switch (_type) {
        case 'replenish':
          console.log(_this.address)
          console.log(_this.lontatStr)
          _this.replenishModel=true;
          break;
        case 'the_feedback':
          _this.feedbackModel=true;
          break;
        case 'task_list':
          _this.taskModel=true;
          break;
        default:
          break;
      }
      //this.$showBottomToast(_type);
    },
   
    

  },
  
  mounted(){
    console.log("come in info")
    //window.locationSet=this.locationSet;
    let _this=this;
    this.mapsinfo = new AMap.Map('containerinfo', {
      zoom:11,//级别
      center: [116.397428, 39.90923],//中心点坐标
      resizeEnable: true,
    });
    // if(this.$isAndroid()){
    //   console.log("invoking android!")
    //   window.android.getCurrentLocation();
    // }else{
    //   this.locationSet("93.793409_31.896125_四川省雅安市拉亚镇桑木卡")
    // }
    
     let lonlat=_this.itemObj.longitude+"_"+_this.itemObj.latitude+"_"+_this.itemObj.eventaddress;
     let obj={"id":"1111","name":"测试"}
     //_this.$refs.CMap.locationSet(lonlat);
     this.locationSet(lonlat)
    window.GoBack=this.GoBack;//安卓调用GoBack（手机back键返回问题）
     //_this.$refs.CMap.navigationLine();

  }
}
</script>

<style lang="less" scoped>
.big_div{
  width: 100%;
  height: 100%;
  // background:url("../../assets/images/bj.png");
  // background-size: 100% 100%;
  // background-repeat: no-repeat;
  .big_title{
    width: 100%;
    height: 50px;
    line-height: 50px;
    span{
      display: inline-block;
      float: left;
      color: #ffffff;
    }
    .span_front{
      width: 75%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      padding-left: 5%;
      font-size: 16px;
    }
    .span_handle{
       width: 25%;
       img{
         width: 75%;
         vertical-align: middle;
       }
    }
  }
  .big_content{
    width: 100%;
    height:calc( 100% - 46px ) ;
    border-top: solid 1px rgba(255, 255, 255, 0.15);
    .list_content{
      width: 100%;
      height: 100%;
      overflow-y: auto;
      background: #f4f7f8;
      .content_header{
        width: 100%;
        padding-left: 5%;
        background: #ffffff;
        .header_title{
          display: block;
          width: 95%;
          font-size: 18px;
          font-weight: 600;
          padding: 1vh 0px;
          // overflow: hidden;
          // text-overflow: ellipsis;
          // white-space: nowrap;
        }
        .header_time{
          display: block;
          width: 95%;
          height: 3vh;
          line-height: 3vh;
          color: #888888;
          font-size: 13px;
        }
        .header_handle{
          display: block;
          width: 95%;
          height: 8vh;
          .handle_left{
            height: 100%;
            width: 70%;
            display: inline-block;
            float: left;
            padding-top: 2vh;
            .tab_red{
              border: 1px solid #ff0000;
              color: #ff0000;
              border-radius: 6px;
              height: 4.3vh;
              line-height: 4.3vh;
              display: inline-block;
              font-size: 13px;
              max-width: 30%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .tab_gray{
              border: 1px solid #dcdcdc;
              color: #333;
              border-radius: 6px;
              height: 4.3vh;
              line-height: 4.3vh;
              display: inline-block;
              font-size: 13px;
              max-width: 50%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            
          }
          .handle_right{
            display: inline-block;
            height: 100%;
            width: 30%;
            padding-top: 2vh;
            .btn_feedback{
              width: 85%;
              height: 4.3vh;
              line-height: 4.3vh;
              display: inline-block;
              background: #409eff;
              color: #fefefe;
              font-size: 13px;
              padding-left: 5%;
              float: right;
              img{
                width: 20%;
                vertical-align: middle;
                margin-right: 7%;
              }

            }
          }
        }
      }
      .content_map{
        width: 100%;
        height: 45%;
        position: relative;
         .map_title{
            width: 100%;
            height: 40px;
            background: #f4f7f8;
            line-height: 40px;
            padding-left: 5%;
            img{
              width: 75%;
              vertical-align: middle;
            }
            .location_content{
              display: inline-block;
              width: 67%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              padding-top: 1px;
            }
            .location_after{
              color: #39b5f9;
              width: 25%;
              img{
                width: 18%;
                margin-bottom: 3px;
              }
            }
            span{
              display: inline-block;
              float: left;
            }
            span:nth-child(1){
              width: 7%;
            }
          }
        .containerinfo{
          width: 100%;
          height: 87%;
        }
      }
      .content_foot{
        width: 100%;
        height: 35%;

        .info_item{
          width: 100%;
          height: 35%;
          padding-left: 5%;
          background: #ffffff;
          margin-bottom: 1vh;
          .item_title{
            width: 95%;
            height: 45%;
            padding-top: 2%;
            span{
              line-height: 4vh;
              display: inline-block;
              height: 4vh;
              font-size: 15px;
            }
            img{
                width: 1.5%;
                height: 70%;
                vertical-align: middle;
            }
          }
          .item_content{
             width: 95%;
             height: 50%;
             padding: 8px 0px;
             span{
               font-size: 12px;
               display: inline-block;
               color: #222222;
             }
             .people_die{
                color: #222222;
                font-size: 19px;
                font-weight: bold;
             }
             .people_bruise{
                color: #e78347;
                font-size: 19px;
                font-weight: bold;
             }
             .people_missing{
                color: #dd2424;
                font-size: 19px;
                font-weight: bold;
             }

          }
        }
        .foot_btn{
          width: 100%;
          height: 25%;
          span{
            width: 42%;
            height: 75%;
            display: inline-block;
            background: #409eff;
            color: #fff;
            margin-left: 5%;
            border-radius: 30px;
            text-align: center;
            font-size: 17px;
            line-height: 6vh;
            margin-top: .7vh;
          }
          span:nth-child(1){
            background: rgba(220, 220, 220, 0.06);
            border: solid 1px rgba(179, 179, 179, 0.6);
            color:#333333;
          }
        }
      }

      
    }
  }
}
.picker-buttons {
  margin: 0 15px;
}
</style>